<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<%
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
             
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
  <head>
    <base href="<%=basePath%>"> 
    
    <title>My JSP 'index.jsp' starting page</title>
    <link rel="stylesheet" type="text/css" href="css/edittable.css"  ></link>  
		<link rel="stylesheet" type="text/css" href="css/validate.css"  ></link>  
		<script type="text/javascript"  src="js/jquery-1.8.0.js"></script>
    <script>
    function  checkRoleName(){
			var result=true;
			var reg=/^.{2,15}$/;
			var roleName=$("#roleName").val();
		if(!reg.test(roleName)){
		$("#roleName_msg").html("角色名格式错误! ").css("color","red");
			result=false;
			}
		else{
			 $.ajax({
				 url:"RoleServlet.do?flag=check",
				 type:"POST",
				 data:{roleName:roleName},
				 async:false,//必须写要不然有可能没判断完这个方法已经运行完了,就会出现用户名重复但是能提交
				 success:function(data){
					 /*if("1"==data){
						 $("#roleName_msg").html("验证通过").css("color","green"); 
					 }*/  
					 if("0"==data){
						 result=false;
						 $("#roleName_msg").html("角色名重复!").css("color","red"); 
					 }
						
				 },
			});
		}
		 if(result==true){
			 $("#roleName_msg").html("验证通过").css("color","green");  
		 }
		return result;
		}
    
    function checkAll(){
		var result=true;
		if(checkRoleName()==false)
			result=false;
			if(result==true){
	 				return confirm("确定要提交吗");
	 		}
		if(result==false){
			alert("部分信息错误请重新修改");
		}
		return result;
	}
    
    $(function(){
    	 $("input[type=text],textarea").focus(function(){
			  $(this).addClass("input_focus");
			}).blur(function(){
					$(this).removeClass("input_focus");
			});

		$(".form_btn").hover(function(){
				$(this).css("color","red").css("background","#6FB2DB");
			},
			
			function(){
				$(this).css("color","#295568").css("background","#BAD9E3");
			});
		
    	$("#roleName").focus(function(){
			$("#roleName_msg").html("2-15位,非空白字符").css("color","#8FA0AC");
		}).blur(checkRoleName);
    });
    
   
    
   
    
    </script>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	
	
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  </head>
  
  <body>
  <div class ="div_title">
		 <div class="div_titlename"> <img src="images/san_jiao.gif" ><span>角色添加</span></div>
	 </div>
				 
	 <form action="RoleServlet.do?flag=add"  method="post">
		 <table class="edit_table" >
		 		<tr>
		 			 	<td class="td_info">角色名称:</td>	
		 			 	<td class="td_input_short"> 
		 			 		<input type="text" class="txtbox" id="roleName" name="roleName" value="${param.roleName}"/> 
		 			 	</td>   
		 			 	<td>
		 			 		<label class="validate_info" id="roleName_msg"  >2-15位,非空白字符</label>
		 			 	</td> 
		 		</tr>
		 	
		 		
		 		<tr>
		 			<td class="td_info">角色描述:</td>	
		 			<td><textarea rows="4" cols="27" name="note" id="note" class="txtarea"  >${param.note}</textarea> </td>	
		 			<td><label></label></td>	
		 		</tr>
		 		<tr>
		 			<td class="td_info"> </td>	
		 			<td> 
		 			<input class="form_btn" type="submit" value="提交" onclick="return checkAll()"/> 
		 			<input type="reset"  class="form_btn" value="重置" />
		 			 </td>	
		 			<td>
		 				<label id="result_msg" class="result_msg">${msg}</label>
		 			</td>	
		 		</tr>
		</table>
     </form>
  </body>
</html>